"use client";

import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import AuthShell, {
  buttonPrimaryClass,
  inputClass,
  labelClass,
} from "@/shared/AuthShell";
import { useAppDispatch, useAppSelector } from "@/core/hook";
import { setCredentials } from "@/core/authSlice";
import { useLoginMutation } from "@/services/auth-service";
import { getApiErrorMessage } from "@/utils/apiError";

export default function AdminLoginPage() {
  const router = useRouter();
  const params = useSearchParams();
  const next = params?.get("next") ?? "/admin";
  const dispatch = useAppDispatch();
  const { isAuthenticated, isInitializing } = useAppSelector((s) => s.auth);
  const [login, { isLoading }] = useLoginMutation();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errorMsg, setErrorMsg] = useState("");

  useEffect(() => {
    if (!isInitializing && isAuthenticated) router.replace(next);
  }, [isAuthenticated, isInitializing, router, next]);

  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setErrorMsg("");
    try {
      const result = await login({ email, password }).unwrap();
      dispatch(setCredentials({ token: result.token, admin: result.admin }));
      router.replace(next);
    } catch (err) {
      setErrorMsg(getApiErrorMessage(err, "Unable to sign in."));
    }
  };

  return (
    <AuthShell
      title="Admin Sign In"
      subtitle="Access the Fauzan Resorts admin portal"
      footer={
        <>
          Forgot your password?{" "}
          <Link href="/admin/forgot-password" className="text-[#d6ac63] underline-offset-2 hover:underline">
            Reset it
          </Link>
        </>
      }
    >
      <form onSubmit={onSubmit} noValidate className="space-y-5">
        <div>
          <label htmlFor="email" className={labelClass}>
            Email
          </label>
          <input
            id="email"
            name="email"
            type="email"
            autoComplete="email"
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className={inputClass}
          />
        </div>
        <div>
          <label htmlFor="password" className={labelClass}>
            Password
          </label>
          <input
            id="password"
            name="password"
            type="password"
            autoComplete="current-password"
            required
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            className={inputClass}
          />
        </div>

        {errorMsg ? <p className="text-sm text-red-500">{errorMsg}</p> : null}

        <button type="submit" disabled={isLoading} className={buttonPrimaryClass}>
          {isLoading ? "Signing in…" : "Sign in"}
        </button>
      </form>
    </AuthShell>
  );
}