import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import api from '../api';
import { Lock, User } from 'lucide-react';

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

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        try {
            const response = await api.post('/auth/login', { username, password });
            const { access_token } = response.data;

            const role = username === 'admin' ? 'admin' : 'user';

            login(access_token, { username, role });
            navigate('/dashboard');
        } catch (err) {
            setError('Invalid credentials');
        }
    };

    return (
        <div className="min-h-screen flex items-center justify-center bg-secondary">
            <div className="bg-white p-8 rounded shadow-sm border border-gray-200 w-96">
                <div className="flex justify-center mb-6">
                    <img src="/logo.png" alt="Logo" className="h-12 w-auto" />
                </div>
                <h2 className="text-xl font-bold mb-6 text-center text-primary">Sign In</h2>
                {error && <div className="bg-red-50 text-red-700 p-2 rounded mb-4 text-sm border border-red-100 text-center">{error}</div>}
                <form onSubmit={handleSubmit}>
                    <div className="mb-4">
                        <label className="block text-sm font-medium text-gray-700 mb-1">Username</label>
                        <div className="relative">
                            <User className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
                            <input
                                type="text"
                                className="pl-9 w-full border border-gray-300 rounded p-2 text-sm focus:ring-1 focus:ring-accent focus:border-accent outline-none transition-all"
                                value={username}
                                onChange={(e) => setUsername(e.target.value)}
                                required
                                placeholder="Enter your username"
                            />
                        </div>
                    </div>
                    <div className="mb-6">
                        <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
                        <div className="relative">
                            <Lock className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
                            <input
                                type="password"
                                className="pl-9 w-full border border-gray-300 rounded p-2 text-sm focus:ring-1 focus:ring-accent focus:border-accent outline-none transition-all"
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                                required
                                placeholder="Enter your password"
                            />
                        </div>
                    </div>
                    <button
                        type="submit"
                        className="w-full bg-accent text-white py-2 rounded font-medium hover:bg-accent-hover transition-colors shadow-sm"
                    >
                        Login
                    </button>
                </form>
            </div>
        </div>
    );
};

export default Login;