import { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import FieldError from '../components/FieldError';
import { useAuth } from '../context/AuthContext';

export default function Login() {
  const { login } = useAuth();
  const navigate = useNavigate();
  const [form, setForm] = useState({ username: '', password: '' });
  const [error, setError] = useState('');
  const [fieldErrors, setFieldErrors] = useState({});
  const [loading, setLoading] = useState(false);

  function onChange(e) {
    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
    setError('');
    setFieldErrors((prev) => ({ ...prev, [e.target.name]: '' }));
  }

  async function onSubmit(e) {
    e.preventDefault();
    const errors = {};
    if (!form.username.trim()) errors.username = 'Username is required';
    if (!form.password) errors.password = 'Password is required';
    if (Object.keys(errors).length) {
      setFieldErrors(errors);
      return;
    }

    setLoading(true);
    const result = await login(form.username, form.password);
    setLoading(false);

    if (!result.ok) {
      setError(result.message);
      return;
    }
    navigate('/dashboard');
  }

  return (
    <div className="auth-page">
      <div className="auth-panel">
        <div className="auth-header">
          <span className="brand-mark">EMS</span>
          <h1>Sign in</h1>
          <p>Employee Management System</p>
        </div>

        <form className="form" onSubmit={onSubmit} noValidate>
          {error && <div className="alert alert-error">{error}</div>}

          <label>
            Username
            <input
              name="username"
              value={form.username}
              onChange={onChange}
              autoComplete="username"
              placeholder="Enter username"
            />
            <FieldError message={fieldErrors.username} />
          </label>

          <label>
            Password
            <input
              type="password"
              name="password"
              value={form.password}
              onChange={onChange}
              autoComplete="current-password"
              placeholder="Enter password"
            />
            <FieldError message={fieldErrors.password} />
          </label>

          <button type="submit" className="btn btn-primary" disabled={loading}>
            {loading ? 'Signing in...' : 'Login'}
          </button>
        </form>

        <p className="auth-footer">
          New user? <Link to="/register">Register here</Link>
        </p>
        <p className="hint">Default admin: <code>admin</code> / <code>admin123</code></p>
      </div>
    </div>
  );
}