/**
 * LoginPage.tsx
 * Página de autenticação — ponto de entrada da aplicação.
 */

import { useState, type FormEvent } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { useMutation } from '@tanstack/react-query';
import { api } from '@/lib/api';
import { useAuth } from '@/context/AuthContext';
import { useToast } from '@/context/ToastContext';
import styles from './LoginPage.module.css';

export default function LoginPage() {
  const navigate = useNavigate();
  const { login } = useAuth();
  const { addToast } = useToast();

  const [email,    setEmail]    = useState('');
  const [password, setPassword] = useState('');
  const [showPass, setShowPass] = useState(false);

  const { mutate, isPending, isError, error } = useMutation({
    mutationFn: () => api.auth.login({ email, password }),
    onSuccess: ({ token, user }) => {
      login(token, user);
      addToast('Login realizado com sucesso!', 'success');
      navigate('/dashboard', { replace: true });
    },
    onError: (err: any) => {
      addToast(err.message || 'Erro ao realizar login', 'error');
    }
  });

  function handleSubmit(e: FormEvent) {
    e.preventDefault();
    mutate();
  }

  const errorMsg = isError && error instanceof Error ? error.message : null;

  return (
    <div className={styles.page}>
      <div className={styles.card}>

        {/* Logo */}
        <div className={styles.logo}>
          <svg width="40" height="40" viewBox="0 0 32 32" fill="none" aria-hidden="true">
            <rect width="32" height="32" rx="8" fill="var(--color-accent)" fillOpacity="0.2" />
            <path d="M8 11h16M8 16h10M8 21h12" stroke="var(--color-accent)" strokeWidth="2.2" strokeLinecap="round" />
          </svg>
          <div>
            <h1 className={styles.appName}>Helpdesk TI</h1>
            <p className={styles.appSub}>Central de Chamados</p>
          </div>
        </div>

        <h2 className={styles.heading}>Entrar na sua conta</h2>

        <form className={styles.form} onSubmit={handleSubmit} noValidate>
          <div className={styles.field}>
            <label htmlFor="login-email" className={styles.label}>E-mail</label>
            <input
              id="login-email"
              type="email"
              className="input"
              placeholder="seu@email.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              autoComplete="email"
              disabled={isPending}
            />
          </div>

          <div className={styles.field}>
            <label htmlFor="login-password" className={styles.label}>Senha</label>
            <div className={styles.passwordWrapper}>
              <input
                id="login-password"
                type={showPass ? 'text' : 'password'}
                className="input"
                placeholder="••••••••"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                autoComplete="current-password"
                disabled={isPending}
              />
              <button
                type="button"
                className={styles.showPass}
                onClick={() => setShowPass((v) => !v)}
                aria-label={showPass ? 'Ocultar senha' : 'Mostrar senha'}
              >
                {showPass ? '🙈' : '👁️'}
              </button>
            </div>
          </div>

          {errorMsg && (
            <div className={styles.error} role="alert">{errorMsg}</div>
          )}

          <button
            type="submit"
            className={`btn btn--primary ${styles.submitBtn}`}
            disabled={isPending || !email || !password}
            aria-busy={isPending}
          >
            {isPending ? (
              <><span className="spinner" style={{ width: 16, height: 16, borderWidth: 2 }} /> Entrando...</>
            ) : 'Entrar'}
          </button>
        </form>

        <p className={styles.registerLink}>
          Não tem conta?{' '}
          <Link to="/register">Solicite acesso ao administrador</Link>
        </p>
      </div>
    </div>
  );
}