"use client";

import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { useLoadingModal } from "@/app/components/providers/loading-modal-provider";
import { useAuth } from "@/app/components/providers/auth-provider";
import { Button } from "@/app/components/ui/button";
import { FormInput } from "@/app/components/ui/form-input";
import { loginRequest } from "@/lib/api/auth";
import { getErrorMessage } from "@/lib/api/types";
import { getDefaultRouteForRole } from "@/lib/auth/permissions";
import { getAuthUser } from "@/lib/auth/session";
import { isAdminWebRole } from "@/lib/auth/roles";
import { clearAuthToken, getAuthToken, setAuthTokens } from "@/lib/auth/token";

export function LoginForm() {
  const router = useRouter();
  const { setUser } = useAuth();
  const { showLoading, hideLoading, isOpen: isLoading } = useLoadingModal();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const token = getAuthToken();

    if (!token) return;

    const user = getAuthUser();

    if (user) {
      router.replace(getDefaultRouteForRole(user.role));
    }
  }, [router]);

  const isValid = username.trim().length > 0 && password.trim().length > 0;

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();

    const form = e.currentTarget;
    const usernameInput = form.elements.namedItem("username") as HTMLInputElement;
    const passwordInput = form.elements.namedItem("password") as HTMLInputElement;

    const finalUsername = usernameInput?.value || username;
    const finalPassword = passwordInput?.value || password;

    const currentIsValid = finalUsername.trim().length > 0 && finalPassword.trim().length > 0;
    if (!currentIsValid || isLoading) return;

    setError(null);
    showLoading({
      message: "Jangan tutup, proses sedang berlangsung",
      ariaLabel: "Memproses login",
    });

    try {
      const { accessToken, refreshToken, user } = await loginRequest({
        username: finalUsername.trim(),
        password: finalPassword,
        platform: "admin",
      });

      if (!user || !isAdminWebRole(user.role)) {
        clearAuthToken();
        setError(
          "Akun dengan role ini hanya dapat digunakan di aplikasi mobile.",
        );
        hideLoading();
        return;
      }

      setAuthTokens(accessToken, refreshToken);
      setUser(user);

      hideLoading();
      router.push(getDefaultRouteForRole(user.role));
    } catch (err) {
      setError(getErrorMessage(err, "Login gagal. Periksa username dan password."));
      hideLoading();
    }
  }

  return (
    <form onSubmit={handleSubmit} className="flex w-full flex-col gap-8">
      <div className="flex flex-col gap-4">
        {error && (
          <p className="text-m-regular rounded-lg border border-danger-200 bg-danger-50 px-4 py-3 text-danger-700">
            {error}
          </p>
        )}

        <FormInput
          id="username"
          label="Username"
          value={username}
          onChange={setUsername}
          placeholder="Masukkan username kamu"
          autoComplete="username"
          disabled={isLoading}
        />

        <FormInput
          id="password"
          label="Password"
          value={password}
          onChange={setPassword}
          placeholder="Masukkan password"
          autoComplete="current-password"
          disabled={isLoading}
          withPasswordToggle
        />
      </div>

      <Button
        type="submit"
        variant="primary"
        size="lg"
        disabled={isLoading}
        className="w-full"
      >
        Masuk
      </Button>
    </form>
  );
}