import { useState } from 'react';
import { useLogin } from '../hooks/useLogin';

const fieldStyle = {
  width: '100%',
  border: '1px solid var(--color-border)',
  borderRadius: '16px',
  padding: '0.95rem 1rem',
  background: '#fff',
  color: 'var(--color-text)',
  outline: 'none',
};

const primaryButtonStyle = {
  width: '100%',
  padding: '0.95rem 1rem',
  borderRadius: '16px',
  border: 'none',
  background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
  color: '#fff',
  fontWeight: 700,
  boxShadow: 'var(--shadow-md)',
};

const secondaryButtonStyle = {
  width: '100%',
  padding: '0.95rem 1rem',
  borderRadius: '16px',
  border: '1px solid rgba(0, 49, 80, 0.16)',
  background: '#fff',
  color: 'var(--color-primary)',
  fontWeight: 700,
};

const initialFormData = {
  username: '',
  password: '',
};

export function LoginForm() {
  const [formData, setFormData] = useState(initialFormData);
  const { login, isSubmitting } = useLogin();

  async function handleSubmit(event) {
    event.preventDefault();
    await login(formData);
  }

  return (
    <form onSubmit={handleSubmit} style={{ display: 'grid', gap: '1rem' }}>
      <label style={{ display: 'grid', gap: '0.5rem' }}>
        <span style={{ fontWeight: 600 }}>Usuario AD</span>
        <input
          style={fieldStyle}
          type="text"
          placeholder="seu.usuario"
          value={formData.username}
          onChange={(event) =>
            setFormData((current) => ({ ...current, username: event.target.value }))
          }
        />
      </label>

      <label style={{ display: 'grid', gap: '0.5rem' }}>
        <span style={{ fontWeight: 600 }}>Senha</span>
        <input
          style={fieldStyle}
          type="password"
          placeholder="Digite sua senha"
          value={formData.password}
          onChange={(event) =>
            setFormData((current) => ({ ...current, password: event.target.value }))
          }
        />
      </label>

      <button style={primaryButtonStyle} type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Entrando...' : 'Entrar'}
      </button>

      <button style={secondaryButtonStyle} type="button">
        Entrar com Microsoft
      </button>

      <a
        href="#forgot-password"
        style={{
          justifySelf: 'center',
          color: 'var(--color-secondary)',
          fontWeight: 600,
        }}
      >
        Esqueci minha senha
      </a>
    </form>
  );
}