import React, { useState } from 'react';
import api from '../axios';

const Login = () => {
  const [credentials, setCredentials] = useState({ email: '', password: '' });
  const [error, setError] = useState(''); // New state for error messages

  const handleChange = (e) => {
    setCredentials({ ...credentials, [e.target.name]: e.target.value });
    if (error) setError(''); // Clear error when user starts typing again
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await api.post('/users/login', credentials);
      
      localStorage.setItem('token', res.data.token);
      localStorage.setItem('userEmail', credentials.email);
      
      window.location.href = '/dashboard';
    } catch (error) {
      // Set the error message instead of alerting
      setError(error.response?.data?.message || "Invalid credentials");
    }
  };

  return (
    <div style={containerStyle}>
      <div style={cardStyle}>
        <div style={{ textAlign: 'center', marginBottom: '30px' }}>
          <h1 style={{ color: '#2563eb', margin: '0 0 10px 0', fontSize: '28px', fontWeight: '800' }}>FixTrack</h1>
          <p style={{ color: '#64748b', fontSize: '14px' }}>Welcome back! Please enter your details.</p>
          
          {/* ERROR MESSAGE HEADER */}
          {error && (
            <div style={{
              marginTop: '20px',
              padding: '12px',
              backgroundColor: '#fef2f2',
              color: '#b91c1c',
              borderRadius: '8px',
              border: '1px solid #fee2e2',
              fontSize: '14px',
              fontWeight: '500'
            }}>
              {error}
            </div>
          )}
        </div>

        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
          <div style={inputGroupStyle}>
            <label style={labelStyle}>Email Address</label>
            <input 
              name="email" 
              type="email" 
              placeholder="name@company.com" 
              onChange={handleChange} 
              style={inputStyle}
              required 
            />
          </div>

          <div style={inputGroupStyle}>
            <label style={labelStyle}>Password</label>
            <input 
              name="password" 
              type="password" 
              placeholder="••••••••" 
              onChange={handleChange} 
              style={inputStyle}
              required 
            />
          </div>

          <button type="submit" style={buttonStyle}>Sign In</button>
        </form>

        <p style={{ textAlign: 'center', marginTop: '25px', fontSize: '14px', color: '#64748b' }}>
          Don't have an account? <a href="/register" style={{ color: '#2563eb', fontWeight: '600', textDecoration: 'none' }}>Create one</a>
        </p>
      </div>
    </div>
  );
};


const containerStyle = { display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh', backgroundColor: '#f8fafc', fontFamily: 'Inter, sans-serif' };
const cardStyle = { width: '100%', maxWidth: '400px', padding: '40px', backgroundColor: '#ffffff', borderRadius: '16px', boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1)', border: '1px solid #e2e8f0' };
const inputGroupStyle = { display: 'flex', flexDirection: 'column', gap: '8px' };
const labelStyle = { fontSize: '14px', fontWeight: '600', color: '#334155' };
const inputStyle = { padding: '12px 16px', borderRadius: '8px', border: '1px solid #e2e8f0', fontSize: '15px', backgroundColor: '#f8fafc', outline: 'none' };
const buttonStyle = { padding: '12px', backgroundColor: '#2563eb', color: '#ffffff', border: 'none', borderRadius: '8px', fontSize: '16px', fontWeight: '600', cursor: 'pointer', marginTop: '10px' };

export default Login;