"use client";

import { FormEvent, useState } from "react";
import { useRouter } from "next/navigation";
import { createClient } from "../../../lib/supabase/client";

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

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");

  async function handleLogin(
    event: FormEvent<HTMLFormElement>
  ) {
    event.preventDefault();

    setLoading(true);
    setErrorMessage("");

    const supabase = createClient();

    const { error } =
      await supabase.auth.signInWithPassword({
        email,
        password,
      });

    if (error) {
      setErrorMessage(error.message);
      setLoading(false);
      return;
    }

    router.push("/admin");
    router.refresh();
  }

  return (
    <main className="flex min-h-screen items-center justify-center bg-[#fffaf4] px-5">

      <div className="w-full max-w-md rounded-[32px] bg-white p-8 shadow-xl md:p-10">

        <div className="text-center">
          <h1 className="text-3xl font-black tracking-[0.2em]">
            PELCY
          </h1>

          <p className="mt-3 text-sm text-black/50">
            Administration Portal
          </p>
        </div>

        <form
          onSubmit={handleLogin}
          className="mt-10 space-y-5"
        >

          <div>
            <label className="text-sm font-bold">
              Email Address
            </label>

            <input
              type="email"
              value={email}
              onChange={(event) =>
                setEmail(event.target.value)
              }
              required
              placeholder="emmanuel.iroh@gmail.com"
              className="mt-2 w-full rounded-2xl border border-black/10 px-4 py-4 outline-none focus:border-black"
            />
          </div>

          <div>
            <label className="text-sm font-bold">
              Password
            </label>

            <input
              type="password"
              value={password}
              onChange={(event) =>
                setPassword(event.target.value)
              }
              required
              placeholder="Enter password"
              className="mt-2 w-full rounded-2xl border border-black/10 px-4 py-4 outline-none focus:border-black"
            />
          </div>

          {errorMessage && (
            <div className="rounded-2xl bg-red-100 p-4 text-sm text-red-700">
              {errorMessage}
            </div>
          )}

          <button
            type="submit"
            disabled={loading}
            className="w-full rounded-full bg-[#2b2118] px-6 py-4 font-bold text-white disabled:opacity-50"
          >
            {loading ? "Signing in..." : "Sign In"}
          </button>

        </form>

        <a
          href="/"
          className="mt-7 block text-center text-sm text-black/50 hover:text-black"
        >
          ← Return to PELCY
        </a>

      </div>

    </main>
  );
}