'use client';
import SimpleInput from '@/components/input';
import PasswordInput from '@/components/password';
import React from 'react';
import { useRouter } from 'next/navigation';
import axiosInstance from '@/utils/api-config';

export default function LoginForm() {
  const router = useRouter();

  const [loginData, setLoginData] = React.useState({
    nombre_usuario: '',
    password: '',
  });

  const [error, setError] = React.useState('');
  const [isLoading, setIsLoading] = React.useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setLoginData((prevData) => ({ ...prevData, [name]: value }));
    // Clear error when user starts typing
    if (error) setError('');
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsLoading(true);
    setError('');

    try {
      const response = await axiosInstance.post('/administrador/login', {
        nombre_usuario: loginData.nombre_usuario,
        password: loginData.password,
      });

      // Guardar el token en sessionStorage
      if (response.data.token) {
        sessionStorage.setItem('token', response.data.token);

        // Opcional: guardar información adicional del usuario si viene en la respuesta
        if (response.data.user) {
          sessionStorage.setItem('user', JSON.stringify(response.data.user));
        }

        // Redireccionar al dashboard
        router.push('/user/eventos');
      } else {
        setError('No se recibió token de autenticación');
      }
    } catch (error: unknown) {
      console.error('Error en login:', error);

      // Type guard para axios error
      if (error && typeof error === 'object' && 'response' in error) {
        const axiosError = error as {
          response?: { status?: number; data?: { message?: string } };
        };

        if (axiosError.response?.status === 401) {
          setError('Credenciales incorrectas');
        } else if (axiosError.response?.data?.message) {
          setError(axiosError.response.data.message);
        } else {
          setError('Error al iniciar sesión. Inténtalo de nuevo.');
        }
      } else {
        setError('Error al iniciar sesión. Inténtalo de nuevo.');
      }
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="container my-5 my-md-0">
      <div className="row justify-content-center">
        <div className="col-xl-10">
          <div className="card border-0">
            <div className="card-body p-0">
              <div className="row">
                <div className="col-lg-6">
                  <div className="p-5">
                    <h3 className="fs-4 font-weight-bold text-azul mb-3 login">
                      Iniciar sesión
                    </h3>

                    <h6 className="h5 mb-0">
                      Bienvenido de vuelta al{' '}
                      <span className="text-dorado">Sistema de Eventos</span>
                    </h6>
                    <p className="text-muted mt-2 mb-4">
                      Ingresa tu correo electrónico y tu contraseña para acceder
                      a tu cuenta.
                    </p>

                    {/* Error message */}
                    {error && (
                      <div className="alert alert-danger mb-4">{error}</div>
                    )}

                    <form onSubmit={handleSubmit}>
                      <SimpleInput
                        label="Nombre de usuario"
                        type="text"
                        id="nombre_usuario"
                        name="nombre_usuario"
                        value={loginData.nombre_usuario}
                        onChange={handleChange}
                        required
                      />
                      <PasswordInput
                        label="Contraseña"
                        id="password"
                        name="password"
                        value={loginData.password}
                        onChange={handleChange}
                        required
                      />

                      <div className="justify-content-between align-items-center d-flex">
                        <button
                          type="submit"
                          className="btn btn-azul"
                          disabled={isLoading}
                        >
                          {isLoading ? (
                            <>
                              <span
                                className="spinner-border spinner-border-sm me-2"
                                role="status"
                                aria-hidden="true"
                              ></span>
                              Ingresando...
                            </>
                          ) : (
                            'Ingresar'
                          )}
                        </button>
                      </div>
                    </form>
                  </div>
                </div>

                <div className="col-lg-6 d-none d-lg-inline-block">
                  <div className="position-relative h-100 p-2">
                    <div
                      style={{
                        borderRadius: '0.5rem',
                        backgroundImage: 'url(/assets/image.png)',
                        backgroundSize: 'cover',
                        backgroundPosition: 'center',
                        height: '100%',
                        width: '100%',
                      }}
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
