import axios from 'axios';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { login } from '../services/api';
import '../styles/Login.css';

axios.defaults.withCredentials = true;

function Login() {
  const [formData, setFormData] = useState({
    usernameOrEmail: '',
    password: '',
  });
  const navigate = useNavigate();

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const { usernameOrEmail, password } = formData;
    try {
      const response = await login(usernameOrEmail, password);
      console.log(response.data);
      localStorage.setItem('token', response.data["access_token"]);
      console.log('Token stored in localStorage:', localStorage.getItem('token'));
      navigate('/ocrdashboard');
    } catch (error) {
      console.error('Login failed', error);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-purple-400 via-pink-500 to-blue-500">
      <div className="flex flex-col md:flex-row bg-white rounded-lg shadow-md overflow-hidden w-full max-w-4xl">
        <div className="md:w-1/2 flex justify-center items-center bg-gray-100">
          <img src="/public/HiDigiH.jpg" alt="HiDigi Logo" style={{ height: '250px', width: '250px' }} />
        </div>
        <div className="md:w-1/2 p-8">
          <h2 className="text-2xl font-bold mb-6 text-center">Sign in</h2>
          <form onSubmit={handleSubmit}>
            <div className="mb-4">
              <label className="block text-gray-700 mb-2">Username or Email</label>
              <input
                type="text"
                name="usernameOrEmail"
                value={formData.usernameOrEmail}
                onChange={handleChange}
                className="w-full p-3 border border-gray-300 rounded"
                placeholder="Type your username or email"
                required
              />
            </div>
            <div className="mb-4">
              <label className="block text-gray-700 mb-2">Password</label>
              <input
                type="password"
                name="password"
                value={formData.password}
                onChange={handleChange}
                className="w-full p-3 border border-gray-300 rounded"
                placeholder="Type your password"
                required
              />
              <div className="text-right mt-2">
                <a href="/forgot-password" className="text-blue-500 hover:underline">Forgot Password?</a>
              </div>
            </div>
            <button type="submit" className="w-full bg-blue-500 text-white py-3 px-4 rounded mt-4 hover:bg-blue-600">Sign in</button>
          </form>
          <div className="text-center text-gray-500 text-sm mt-6">
            By clicking "Sign in", you agree to our <a href="/terms" className="text-blue-500 hover:underline">Terms and Conditions</a> and <a href="/privacy" className="text-blue-500 hover:underline">Privacy Policy</a>.
          </div>
          <div className="text-center text-gray-500 text-sm mt-4">
            Don't have an account? <a href="/register" className="text-blue-500 hover:underline">Register</a>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Login;