"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";

import { AuthAPI } from "@/apis/AuthAPI";
import { useAuth } from "@/hooks/useAuth";

type UserTypeOption = {
  id: number;
  name: string;
};

export default function LoginPage(): React.ReactElement {
  const router = useRouter();
  const { isAuthenticated, isVerifying } = useAuth();
  const [userName, setUserName] = useState("");
  const [rut, setRut] = useState("");
  const [password, setPassword] = useState("");
  const [userTypes, setUserTypes] = useState<UserTypeOption[]>([]);
  const [selectedUserType, setSelectedUserType] = useState<number | "">("");
  const [isLoadingUserTypes, setIsLoadingUserTypes] = useState(true);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");

  useEffect(() => {
    if (!isVerifying && isAuthenticated) {
      router.replace("/main/dashboard");
    }
  }, [isAuthenticated, isVerifying, router]);

  useEffect(() => {
    const loadUserTypes = async () => {
      setIsLoadingUserTypes(true);
      try {
        const rows = await AuthAPI.getUserTypes<UserTypeOption>();
        setUserTypes(rows);

        if (rows.length > 0) {
          const envDefaultRole = Number.parseInt(
            process.env.NEXT_PUBLIC_AUTH_USER_TYPE ?? "",
            10,
          );
          const defaultRole = rows.find((row) => row.id === envDefaultRole)?.id ?? rows[0].id;
          setSelectedUserType(defaultRole);
        } else {
          setSelectedUserType("");
        }
      } catch (error) {
        console.error("No se pudieron cargar los tipos de usuario", error);
        setErrorMessage("No se pudieron cargar los tipos de usuario disponibles.");
      } finally {
        setIsLoadingUserTypes(false);
      }
    };

    void loadUserTypes();
  }, []);

  const handleLogin = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setErrorMessage("");

    if (!userName.trim() || !rut.trim() || !password.trim() || !selectedUserType) {
      setErrorMessage("Usuario, RUT, contraseña y rol son obligatorios.");
      return;
    }

    try {
      setIsSubmitting(true);
      const response = await AuthAPI.login({
        user_name: userName.trim(),
        rut: rut.trim(),
        password,
        iduser_type: Number(selectedUserType),
      });

      if (!response?.status) {
        setErrorMessage(response?.data?.message || "No se pudo iniciar sesion.");
        return;
      }

      globalThis.window.location.assign("/main/dashboard");
      return;
    } catch (error) {
      const apiMessage =
        (error as { response?: { data?: { data?: { message?: string }; message?: string } } })?.response
          ?.data?.data?.message ??
        (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
      const message =
        apiMessage ||
        (error instanceof Error ? error.message : "No se pudo iniciar el flujo de autenticacion.");
      setErrorMessage(message);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <main className="min-h-screen flex items-center justify-center bg-gray-50 p-6">
      <form
        onSubmit={handleLogin}
        className="w-full max-w-md bg-white rounded-xl shadow-sm border p-6 space-y-4"
      >
        <h1 className="text-2xl font-semibold text-gray-900">Iniciar sesion</h1>
        <p className="text-sm text-gray-600">Ingresa con tus credenciales para continuar.</p>
        <div className="space-y-3">
          <input
            type="text"
            value={userName}
            onChange={(e) => setUserName(e.target.value)}
            placeholder="Usuario"
            className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-blue-500"
          />
          <input
            type="text"
            value={rut}
            onChange={(e) => setRut(e.target.value)}
            placeholder="RUT empresa"
            className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-blue-500"
          />
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="Contraseña"
            className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-blue-500"
          />
          <select
            value={selectedUserType}
            onChange={(event) => {
              const value = event.target.value;
              setSelectedUserType(value ? Number(value) : "");
            }}
            disabled={isLoadingUserTypes}
            className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100"
          >
            <option value="">{isLoadingUserTypes ? "Cargando roles..." : "Selecciona un rol"}</option>
            {userTypes.map((type) => (
              <option key={type.id} value={type.id}>
                {type.name}
              </option>
            ))}
          </select>
        </div>
        {errorMessage ? <p className="text-sm text-red-600">{errorMessage}</p> : null}
        <button
          type="submit"
          disabled={isSubmitting || isVerifying}
          className="w-full rounded-lg bg-blue-600 text-white py-2.5 hover:bg-blue-700 transition-colors"
        >
          {isSubmitting ? "Ingresando..." : "Ingresar"}
        </button>
      </form>
    </main>
  );
}